<template>
	<div class="container">
		<el-page-header @back="goBack" content="提现记录"></el-page-header>

		<!-- <el-radio-group v-model="dataType" class="e-m-t-45">
			<el-radio-button label="0">提现申请审核</el-radio-button>
			<el-radio-button label="1">提现流水</el-radio-button>
		</el-radio-group> -->

		<div class="other-search-form is-active e-m-t-45">
			<el-form label-position="left" :inline="true" size="small">
				<div class="flex align-items-center">
					<!-- 时间筛选 -->
					<timeChangeList v-model="timeType" @input="getList" @change="changeTime"></timeChangeList>
				</div>
			</el-form>
		</div>

		<el-row type="flex" justify="space-between">
			<el-col :span="3">
				<el-button type="primary" @click="downloadwithdrawa()" plain><i
						class="iconfont icon-excel e-m-r-5"></i>导出Excel</el-button>
			</el-col>
			<el-col class="text-right">
				<el-form :inline="true" label-width="auto" class="nav-bar-form">
					<el-form-item>
						<el-input placeholder="提现人或者流水编号搜索" v-model="key" clearable prefix-icon="el-icon-search"
							@clear="getList"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getList">查询</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>

		<div class="admin-statistics-content e-m-b-15">
            <div class="item e-flex-1">
                <label>未提现金额</label>
                <div class="e-m-t-10"><span class="num">{{ unwithdrawn }}</span><small>元</small></div>
            </div>
            <div class="item e-flex-1">
                <label>待审核金额</label>
                <div class="e-m-t-10"><span class="num">{{ pendingReview }}</span><small>元</small></div>
            </div>
            <div class="item e-flex-1">
                <label>已驳回金额</label>
                <div class="e-m-t-10"><span class="num">{{ rejected }}</span><small>元</small></div>
            </div>
			<div class="item e-flex-1">
                <label>已审核金额</label>
                <div class="e-m-t-10"><span class="num">{{ reviewed }}</span><small>元</small></div>
            </div>
			<div class="item e-flex-1">
                <label>已提现金额(已到账)</label>
                <div class="e-m-t-10"><span class="num">{{ withdrawn }}</span><small>元</small></div>
            </div>
			<div class="item e-flex-1">
                <label>打款出错金额</label>
                <div class="e-m-t-10"><span class="num">{{ payErr }}</span><small>元</small></div>
            </div>
        </div>

		<div class="type-state e-m-b-30">
			<span v-for="(item, index) in statusArr" :key="index" :class="{ 'on': status == item.value }"
				@click="status = item.value">
				<el-badge :value="item.count" class="item" :max="99" :hidden="item.value < 5 && item.count > 0? false : true">
                    {{ item.name }}
                </el-badge>
			</span>
		</div>

		<el-table :data="tableData" style="width: 100%" stripe>
			<el-table-column fixed prop="number" label="提现申请表编号" width="200">
			</el-table-column>
			<el-table-column prop="billdetailnumber" label="流水编号" width="200">
			</el-table-column>
			<el-table-column prop="way" label="提现方式" width="100">
			</el-table-column>
			<el-table-column prop="username" label="提现人">
				<template slot-scope="scope">
					<el-button type="text" @click="userViews(scope.row.userid)">
						<span>{{ scope.row.username }}</span>
						<span v-if="scope.row.enterprise">({{ scope.row.enterprise.name }}-{{ scope.row.enterprise.department }})</span>
					</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="amount" label="提现金额（元）" width="150">
			</el-table-column>
			<el-table-column prop="createdate" label="申请时间" width="150">
				<template slot-scope="scope">
					<span>{{ scope.row.createdate }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="state" label="状态" width="150">
				<template slot-scope="scope">
					<span class="color-success" v-if="scope.row.state == '已到账'">已到账</span>
					<span class="color-warning" v-if="scope.row.state == '待审核'">待审核</span>
					<span class="color-danger" v-if="scope.row.state == '已驳回'" :title="scope.row.reason">已驳回</span>
					<span class="color-danger" v-if="scope.row.state == '打款出错'" :title="scope.row.reason">打款出错</span>
					<span class="color-success" v-if="scope.row.state == '已审核'">已审核</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" width="180">
				<template slot-scope="scope">
					<el-button @click="views(scope.row.id)" type="text" size="small">查看</el-button>
					<el-button @click="pass(scope.row.id)" type="text" size="small" v-if="scope.row.state == '待审核'">通过</el-button>
					<el-button @click="reject(scope.row.id)" type="text" size="small" v-if="scope.row.state == '待审核' || scope.row.state == '打款出错'">驳回</el-button>
					
					<el-button slot="reference" type="text" size="small"  v-if="scope.row.way == '微信' && (scope.row.state == '待审核')" @click="weixinPayment(scope.row)">打款</el-button>
					<el-button slot="reference" type="text" size="small"  v-if="scope.row.way == '线下打款' && scope.row.state == '已审核'" @click="againPayment(scope.row)">线下打款</el-button>
					<template v-if="scope.row.state == '打款出错'">
						<template v-if="scope.row.way == '微信'">
							<el-divider direction="vertical" class="e-m-l-4 e-m-r-4"></el-divider>
							<el-popconfirm
								title="请选择打款方式"
								confirm-button-text="微信打款"
								cancel-button-text="线下打款"
								@confirm="weixinPayment(scope.row)"
								@cancel="againPayment(scope.row)"
								>
								<el-button slot="reference" type="text" size="small" v-if="scope.row.state != '已到账'">打款</el-button>
							</el-popconfirm>
						</template>
						<template v-else>
							<el-button v-if="scope.row.state != '已到账'" @click="againPayment(scope.row)" type="text" size="small">打款</el-button>
						</template>
					</template>
				</template>
			</el-table-column>
		</el-table>
		<div class="table-pagination">
			<el-pagination background layout="sizes, total, prev, pager, next" :total="total"
				:page-sizes="[10, 50, 100, 200]" :page-size="pageSize" :current-page="page" @current-change="pageChange"
				@size-change="handleSizeChange">
			</el-pagination>
		</div>
		<!-- 线下打款 -->
		<el-dialog title="线下打款" :visible.sync="dialogVisible" width="500px">
			<el-form ref="form" :model="form" label-width="100px" class="demo-ruleForm" :rules="rules">
				<el-form-item label="银行开户行" prop="bankopenname">
					<el-input v-model="form.bankopenname"></el-input>
				</el-form-item>
				<el-form-item label="银行账号" prop="bankaccount">
					<el-input v-model="form.bankaccount"></el-input>
				</el-form-item>
				<el-form-item label="银行户名" prop="bankname">
					<el-input v-model="form.bankname"></el-input>
				</el-form-item>
				<el-form-item label="结算账户" prop="payway">
					<el-select v-model="form.accountid" placeholder="请选择">
						<el-option v-for="item in paywayList" :key="item.id" :label="item.accountnumber" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="流水账号" prop="paymentno">
					<el-input v-model="form.paymentno"></el-input>
				</el-form-item>
				<el-form-item label="转账凭证">
					<cropper-upload :zoomScale='[1,1]' :isCropper="false" @getUpload="handleFilesSuccess" class="avatar-uploader">
						<img v-if="form.picvoucher" :src="fileURL + form.picvoucher" class="avatar">
						<div class="avatar-uploader-icon" v-else>
							<div><i class="el-icon-plus"></i></div>
							<div class="e-font-14">上传图片</div>
						</div>
					</cropper-upload>
					<!-- <div class="tips e-p-t-10">建议上传尺寸比例为600*600 </div> -->
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="examineSubmit">确定</el-button>
			</span>
		</el-dialog>
		<!-- 查看用户提现详情 -->
		<el-dialog title="查看详情" :visible.sync="dialogVisible2" width="1200px">
			<h3>基本信息</h3>
			<el-descriptions :column="2" border :labelStyle="{ width: '150px' }">
				<el-descriptions-item label="提现申请编号">
					{{ userForm.number }}
				</el-descriptions-item>
				<el-descriptions-item label="流水编号">
					{{ userForm.billdetailnumber }}
				</el-descriptions-item>
				<el-descriptions-item label="提现方式">
					{{ userForm.way }}
				</el-descriptions-item>
				<el-descriptions-item label="提现金额">
					{{ userForm.amount }}元
				</el-descriptions-item>
				<el-descriptions-item label="申请人">
					{{ userForm.username }}
				</el-descriptions-item>
				<el-descriptions-item label="申请时间">
					{{ userForm.createdate }}
				</el-descriptions-item>
				<el-descriptions-item label="用户类型">
					{{ userForm.usertype }}
				</el-descriptions-item>
				<el-descriptions-item label="审核状态">
					<span class="color-success" v-if="userForm.state == '已到账'">{{ userForm.state }}</span>
					<span class="color-warning" v-if="userForm.state == '待审核'">{{ userForm.state }}</span>
					<span class="color-danger" v-if="userForm.state == '已驳回'"
						:title="userForm.reason">{{ userForm.state }}</span>
					<span class="color-danger" v-if="userForm.state == '打款出错'"
						:title="userForm.reason">{{ userForm.state }}</span>
					<span class="color-danger" v-if="userForm.state == '已审核'">{{ userForm.state }}</span>
				</el-descriptions-item>
				<el-descriptions-item label="审核时间" v-if="userForm.examinedate">
					{{ userForm.examinedate }}
				</el-descriptions-item>
				<el-descriptions-item label="审核人" v-if="userForm.examinename">
					{{ userForm.examinename }}
				</el-descriptions-item>
			</el-descriptions>
			<h3>打款信息</h3>
			<el-descriptions :column="2" border :labelStyle="{ width: '150px' }">
				<el-descriptions-item label="打款流水编号" v-if="userForm.paymentno">
					{{ userForm.paymentno }}
				</el-descriptions-item>
				<el-descriptions-item label="打款账号类型">
					{{ userForm.way }}
				</el-descriptions-item>
				<el-descriptions-item label="打款账号" v-if="userForm.accountnumber">
					{{ userForm.accountnumber }}
				</el-descriptions-item>
				<el-descriptions-item label="银行账号" v-if="userForm.bankaccount">
					{{ userForm.bankaccount }}
				</el-descriptions-item>
				<el-descriptions-item label="银行户名" v-if="userForm.bankname">
					{{ userForm.bankname }}
				</el-descriptions-item>
				<el-descriptions-item label="开户行" v-if="userForm.bankopenname">
					{{ userForm.bankopenname }}
				</el-descriptions-item>
			</el-descriptions>
			<h3>提现过程</h3>
			<el-scrollbar class="process-item" :wrap-class="'process-item-wrap'">
				<el-timeline :reverse="false">
					<el-timeline-item v-for="(activity, index) in userForm.process" :key="index"
						:timestamp="activity.createddatetime">
						<div class="flex">
							<span class="e-p-r-50" style="font-weight:bold">{{ activity.state }}</span>
							<div class="tips">{{ activity.remarks }}</div>
						</div>
					</el-timeline-item>
				</el-timeline>
			</el-scrollbar>
			<span slot="footer" class="dialog-footer">
				<el-button @click="pass(userForm.id)" type="primary" v-if="userForm.state == '待审核'">打款</el-button>
				<el-button @click="reject(userForm.id)" type="danger" v-if="userForm.state == '待审核'">拒绝</el-button>
				<el-button @click="dialogVisible2 = false">关闭</el-button>
			</span>
		</el-dialog>
		<!-- 用户详情页面弹窗 -->
        <el-drawer title="" :visible.sync="userView.show" direction="rtl" size="80%" :with-header="false" :append-to-body="true">
            <userView v-if="userView.show" :id="userView.id" @goBack="userView.show = false"></userView>
        </el-drawer>
	</div>
</template>

<script>
	import userView from '@/pages/user/components/views.vue'
	import timeChangeList from '@/components/form-select-type/timeChangeList.vue'
	export default {
		components: {
			timeChangeList,
			userView
		},
		layout: 'admin',
		head() {
			return {
				title: '提现记录' 
			}
		},
		data() {
			return {
				timeType: 0, //时间类型
				startDate: '', //开始时间
            	endDate: '', //结束时间
				loading: true,
				dataType: 0,
				reverse: true,
				// relationid: 0,
				key: '',
				page: 1,
				pageSize: 10,
				status: 1,
				statusArr: [
					// {
					// 	name: '用户(客户组)提现申请',
					// 	value: 1
					// },
					// {
					// 	name: '小哥提现申请',
					// 	value: 2
					// }
					// {
					// 	name: '全部',
					// 	value: [1,2,3,4]
					// },
					{
						name: '待审核',
						value: 1,
						count: 0
					},
					{
						name: '已审核',
						value: 3,
						count: 0
					},
					{
						name: '已驳回',
						value: 2,
						count: 0
					},
					{
						name: '已到账',
						value: 4,
						count: 0
					},
					{
						name: '打款出错',
						value: 5,
						count: 0
					}
				],
				loading: false,
				total: 0,
				dialogVisible: false,
				dialogVisible2: false,
				brotherForm: {},
				userForm: {},
				tableData: [],
				unwithdrawn: 0, //未提现金额
				pendingReview: 0, //待审核金额
				rejected: 0, //已驳回金额
				reviewed: 0, //已审核金额
				withdrawn: 0, //已提现金额(已到账)
				payErr: 0, //打款出错金额
				// 打款
				dialogVisible: false,
				form: {
					id: '',
					status: 1, //0微信提现，1线下提现
					accountid: '',  // 账户类型id
					picvoucher: '', // 资料图片
					paymentno: '', //流水
					bankname: "", //银行户名
					bankaccount: "", //银行账号
					bankopenname: "", //银行开户行
				},
				rules: {},
				paywayList: [],
				// 用户详情页面弹窗
					userView: {
					id: 0,
					show: false
				},
			}
		},
		watch: {
			dialogVisible(value) {
				if (!value) {
					this.form = {
						id: '',
						way: "微信", //0微信，1线下打款,2.银行
						accountid: '',  // 账户类型id
						picvoucher: '', // 资料图片
						paymentno: '', //流水
						bankname: "", //银行户名
						bankaccount: "", //银行账号
						bankopenname: "", //银行开户行
					}
				}
			},
			status(value) {
				this.tableData = []
				this.getList()
			},
			dataType(val) {
				if (val == 0) {
					this.$router.push({
						path: '/admin/withdrawal/list'
					})
				} else {
					this.$router.push({
						path: '/admin/finance/withdrawList'
					})
				}
			}
		},
		mounted() {
			// if (this.$route.query.status) {
			// 	this.status = this.$route.query.status
			// }
			// if (this.$route.query.id) {
			// 	console.log(this.$route.query.id)
			// 	this.status = 2
			// 	this.api = '/Admin/Brother'
			// 	this.relationid = this.$route.query.id
			// }
			this.getList()
			this.getpaywayList()
			// this.relationid = 0
		},
		methods: {
			goBack() {
				this.$router.go(-1)
			},
			// 查看用户详情
			userViews(userid){
				this.userView.id = userid
				this.userView.show = true
			},
			downloadwithdrawa() {
				// let api = ''
				// if (this.status == 1) {
				// 	console.log('用户')
				// 	api = '/Admin/User/Apply/Download'
				// } else {
				// 	console.log('小哥')
				// 	api = '/Admin/Brother/Apply/Download'

				// }

				let api = '/WithdrawApply/Download'
				this.$axios.post(api, {
					"request": {
						"PageIndex": this.page,
						"PageSize": 9999,
						"Key": this.key,
						// "RelationId": this.relationid,
						"timeType": this.timeType,
						"startDate": this.startDate,
						"endDate": this.endDate,
						"state": [this.status], //null全部 1待审核 2已驳回 3已审核 4已到账 5打款出错
					},
					"fields": [{
							"e": "Number",
							"c": "提现申请表编号"
						},
						{
							"e": "billdetailnumber",
							"c": "流水编号"
						},
						{
							"e": "way",
							"c": "提现方式"
						},
						{
							"e": "username",
							"c": "提现人"
						},
						{
							"e": "amount",
							"c": "提现金额（元）"
						},
						{
							"e": "createdate",
							"c": "申请时间"
						},
						{
							"e": "state",
							"c": "状态"
						}
					]

				}, {
					responseType: 'blob'
				}).then(res => {
					console.log(res)
					let content = res;
					let fileName = '提现记录.xls'
					this.utils.saveAndExport(content, fileName)
				})
			},
			// 选择时间
			changeTime(e) {
				console.log(e)
				this.startDate = e['startDate']
				this.endDate = e['endDate']
				this.timeType = e['timeType']
				this.getList()
			},
			getList() {
				this.loading = true
				this.$axios.post('/WithdrawApply/List', {
					"PageIndex": this.page,
					"PageSize": this.pageSize,
					"Key": this.key,
					// "RelationId": this.relationid,
					"timeType": this.timeType,
					"startDate": this.startDate,
					"endDate": this.endDate,
					"state": [this.status], //null全部 1待审核 2已驳回 3已审核 4已到账 5打款出错
				}).then((res) => {
					// this.statusArr = res.state;
					this.statusArr.forEach(item => {
						if(item.value == 1 || item.value == 5){
							item.count = res.state.find((cell)=>cell.value == item.value).count
						}
					})

					this.tableData = res.rows;
					this.total = res.total;
					this.unwithdrawn = res.unwithdrawn //未提现金额
					this.pendingReview = res.pendingreview//待审核金额
					this.rejected = res.rejected //已驳回金额
					this.reviewed = res.reviewed //已审核金额
					this.withdrawn = res.withdrawn //已提现金额(已到账)
					this.payErr = res.payerr //打款出错金额
					this.loading = false
				}).catch(() => {
					this.loading = false
				})
			},
			search() {
				this.getList()
			},
			pageChange(e) { // 页码切换事件
				this.page = e;
				this.getList()
			},
			handleSizeChange(val) {
				this.page = 1;
				this.pageSize = val;
				this.getList()
			},
			views(id) {
				// if (this.status == 1) { //查看用户提现详情
				this.$axios.get('/WithdrawApply/Detail?id=' + id).then((res) => {
					console.log(res)
					this.userForm = res
					this.dialogVisible2 = true
				})
				// 	} else { //查看小哥提现详情
				// 		this.$axios.post('/Admin/Brother/Apply/Details?id=' + id).then((res) => {
				// 			console.log(res)
				// 			this.brotherForm = res
				// 			this.dialogVisible = true
				// 		})
				// 	}
			},
			pass(id) {
				this.$confirm('确认要通过申请吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {+
					this.$axios.get('/WithdrawApply/Pass?id=' + id, ).then((res) => {
						this.$message.success(res.msg);
						this.dialogVisible = false
						this.dialogVisible2 = false
						this.getList()
					})
				})
			},
			reject(id) {
				this.$prompt('确认要拒绝申请吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
					inputErrorMessage: '请填写拒绝申请原因'
				}).then(({
					value
				}) => {
					this.$axios.post('/WithdrawApply/Reject', {
						id: id,
						reason: value
					}).then((res) => {
						this.$message({
							type: 'success',
							message: res.msg
						});
						this.dialogVisible = false
						this.dialogVisible2 = false
						this.getList()
					})
				})
			},
			handleFilesSuccess(res, file) {
				if (file.status === "success") {
					this.loading = false
					this.form.picvoucher = res.path
				}
			},
			checkPayment(id) {
				this.$axios.get('/WithdrawApply/CheckWXState?id='+id).then((res) => {
					if(res.msg == "打款失败"){
						this.$message.error(res.msg);
					}else{
						this.$message.success(res.msg);
					}
					this.getList()
				})
			},
			weixinPayment(row){
				this.$axios.post('/WithdrawApply/Pay',{
					id: row.id,
					way: '微信'
				}).then((res) => {
					this.$message.success('提交成功');
					this.getList()
				})
			},
			againPayment(row) {
				this.form.id = row.id
				// this.form.way = row.way;
				this.form.way = '线下打款';
				this.form.bankname = row.bankname //银行户名
				this.form.bankaccount = row.bankaccount //银行账号
				this.form.bankopenname = row.bankopenname //银行开户行
				this.dialogVisible = true
			},
			examineSubmit(){
				this.$confirm('请确认填写的资料无误?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios.post('/WithdrawApply/Pay',this.form).then((res) => {
						this.$message.success('提交成功');
						this.dialogVisible = false
						this.getList()
					})
				})
			},
			getpaywayList(){
				this.$axios.post('/Operator/Account/List',{
					"PageIndex": 1,
					"PageSize": 999,
				}).then((res)=>{
					this.paywayList = res
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.process {}

	.nav-bar {
		padding: 45px 0 0;
	}

	.send {
		margin-top: 15px;
		margin-right: 10px;
	}

	.dialogForm {
		display: flex;
		flex-wrap: wrap;

		.el-form-item {
			width: 50%;
			float: left;

			&.all {
				width: 100%;
			}

			.el-select {
				width: 100%;
			}
		}
	}
	.admin-statistics-content {
        display: flex;
        background-color: #fff;
        padding: 15px;
        height: calc(100% - 30px);
        border: 1px solid var(--light);

        .item {
            &+.item {
                border-left: 1px solid var(--light);
                padding-left: 30px;
            }

            .icon {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                border: 1px solid var(--light);
                background-color: #f2f3f5;
                padding: 5px;
                margin: 0 20px 0 0;
                box-shadow: 3px 2px 11px 0 rgb(70 70 70 / 22%);
            }

            label {
                color: var(--grey);
                font-size: 12px;
                margin-bottom: 5px;
                display: block;
            }

            .num {
                font-size: 30px;
            }
        }
    }
</style>